Web Worker

Web worker란

웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다.

Chrome의 프로세스 모델
js는 single Thread로 동작하지만 브라우저는 single Thread로 동작하지 않는다.
브라우저에서 처리되는 network 통신 혹은 입출력들은 서로 다른 Thread에서 동작한다.

Web Workder는 브라우저의 maint thread와 별도로 동작하는 thread를 생성해주는 api이다.
Web Worker 로 생성한, Thread 는 브라우저 렌더링 같은 Main Thread 의 작업을 방해하지 않고, 새로운 Thread 에서 스크립트를 실행하는 간단한 방법을 제공한다.

Web worker는 웹에서 지원하는 API이다.

처음 web worker을 접하고 모든 js 생태계에서 약속된 규약인줄 알았으나, 말 그대로 웹 API이다. 즉, 모던 브라우저에서는 잘 동작하나. nodejs에서는 잘 작동하지 않는다.
nodejs 환경에서는 별도의 방법이 있다.

web worker 사용

worker 실행 파일 작성

worker가 실행할 스크립트를 별도의 js파일로 작성한다.

// worker 메시지 수신 listener
self.onmessage = function( e ) {
    console.log( 'Worker가 받은 메시지 ', e.data );

    // 1초 후에 호출한 페이지에 데이터를 보낸다.
    setTimeout( function() {
        postMessage( 'Worker Value' );
    }, 1000 );
};

worker 호출

Workder객체를 만든 후 생성한 worker파일의 이름을 매개변수로 넘겨주면 된다.


var worker = new Worker( 'worker.js' );
worker.postMessage( '워커 실행' );  // 워커에 메시지를 보낸다.

// 메시지는 JSON구조로 직렬화 할 수 있는 값이면 사용할 수 있다. Object등 
// worker.postMessage( { name : '302chanwoo' } );

// 워커로 부터 메시지를 수신한다.
worker.onmessage = function( e ) {
    console.log('호출 페이지 - ', e.data );
};

worker 종료하기

workder.terminate();

web workder scope

main thread에서는 window가 GlobalScope이다.
worker thread에서는 별도의 WorkerGlobalScope를 가진다. 따라서 Window의 메서드나 DOM 조작이 불가능하다.
self 를 이용해서 WorkerGlobalScope에 접근이 가능하다.

self.onmessage=()=>{}

worker은 데이터를 주고 받기 위해 message system(postMesage,onmessage)를 이용한다.
이때 전달하는 데이터는 복사하여, 새로운 값으로 만들어 전달한다.
=> 복사할 수 없는 값은 에러가 발생된다.

관련글

references